<template>
    <div class="data-top">
        <slot />
        <!-- <div class="background" :style="{ background: `url(${userInfo.cover}) center / cover no-repeat` }" /> -->
        <van-image class="background" fit="cover" :src="userInfo?.cover">
            <template v-slot:loading>
                <van-loading type="spinner" size="20" />
            </template>
        </van-image>
        <div class="headImg">
            <div>
                <van-image round fit="cover" width="6.25rem" height="6.25rem" :src="userInfo.headImgUrl" />
                <ul>
                    <li><span>{{ userInfo.nickname }}</span></li>
                    <li><span>手机号: {{ userInfo.phone }}</span></li>
                </ul>
            </div>
            <div class="right">
                <van-button round type="default" icon="good-job-o" size="small" @click="onBut" >
                    <p>{{ userInfo.upvote }}</p>
                </van-button>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapActions } from 'vuex';

    export default {
        props: ['userInfo'],
        methods: {
            ...mapActions(['modifyLike']),
            onBut() {
                ++this.userInfo.upvote;
                this.modifyLike(this.userInfo.phone);
            },
        },
    };
</script>

<style lang="less" scoped>
    .data-top {
        .background {
            position: relative;
            width: 100%;
            height: 12.5rem;
            &::before {
                position: absolute;
                bottom: -0.25rem;
                display: block;
                content: "";
                height: 1.25rem;
                width: 100%;
                background-color: rgb(255, 255, 255);
                border-radius: 1.25rem 1.25rem 0 0;
            }
        }
        .headImg {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 6.875rem;
            background-color: rgb(255, 255, 255);
            div {
                &:first-child {
                    display: flex;
                    justify-content: flex-start;
                    .van-image {
                        margin-left: 0.625rem;
                    }
                    ul {
                        padding-left: 0.625rem;
                    }
                }
            }
            .right {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-right: 0.625rem;
                p {
                    text-align: center;
                }
            }
        }
    }
</style>
